<!DOCTYPE html>
<html>
<head>
	<title>任务办理&nbsp;&nbsp;&nbsp;${has(title)?title:''}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta charset="utf-8"/>
	<link rel="shortcut icon" href="${cdn}/favicon.ico"/>

	<%
	if (profile=="dev") {
	%>
	<link href="${cdn}/static/skins/lightblue/assets/dhtmlx4/skins/dhx_skyblue_clouds/dhtmlx.css" rel="stylesheet" type="text/css">

	<link href="${cdn}/static/skins/lightblue/assets/bootstrap/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="${cdn}/static/skins/lightblue/assets/bootstrap/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

	<link href="${cdn}/static/skins/lightblue/assets/bootstrap/global/css/components-md.css" rel="stylesheet" type="text/css">
	<link href="${cdn}/static/skins/lightblue/assets/bootstrap/global/css/plugins-md.css" rel="stylesheet" type="text/css">

	<link href="${cdn}/static/skins/lightblue/assets/bootstrap/global/plugins/bootstrap-sweetalert/sweetalert.css" rel="stylesheet" type="text/css">
	<link href="${cdn}/static/skins/lightblue/assets/bootstrap/global/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css">

	<link href="${cdn}/static/jsplatform/portal/layout/task/v0/custom.css" rel="stylesheet">
	<link href="${cdn}/static/jsplatform/portal/layout/task/v0/wrapper.css" rel="stylesheet">
	<link href="${cdn}/static/skins/lightblue/assets/platform/designer/css/diagram-js.css" rel="stylesheet">

	<link href="${cdn}/static/skins/lightblue/assets/jquery-ui/jquery-ui.css" rel="stylesheet" type="text/css">
	<link href="${cdn}/static/skins/lightblue/assets/bootstrap/global/plugins/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">

	<link href="${cdn}/static/skins/lightblue/assets/bootstrap/global/plugins/datetimepicker4form/timepicker-m.css" rel="stylesheet" type="text/css">
	<link href="${cdn}/static/skins/lightblue/assets/bootstrap/global/plugins/datetimepicker4form/bootstrap-datetimepicker-m.css" rel="stylesheet" type="text/css">

	<link href="${cdn}/static/skins/lightblue/assets/bootstrap/global/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" type="text/css">

	<% } else { %>
	<link href="${cdn}/static/skins/lightblue/assetsmin/platform/task/task.all.css?${productionVersion}" rel="stylesheet" type="text/css">
	<% }%>
</head>

<body>

	<!--Script should before formfile-->
	<%
	if (profile=="dev") {
	%>
	<script src="${cdn}/static/jslib/3rdpartyother/json2.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/3rdpartyother/lodash.core.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/bootstrap/global/plugins/jquery.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/jquery/jquery.form.min.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/3rdpartyother/angular-all.min.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/jquery/jquery.tipsy.js" type="text/javascript"></script>

	<script src="${cdn}/static/jslib/bootstrap/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

	<script src="${cdn}/static/jslib/dhtmlx4/alone/dhxgrid.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/dhtmlx4/ext/dhxgrid.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/dhtmlx4/ext/excell_types.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/dhtmlx4/alone/dhxtoolbar.js" type="text/javascript"></script>

	<script src="${cdn}/static/jslib/bootstrap/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

	<script src="${cdn}/static/jslib/bootstrap/global/plugins/datetimepicker4form/bootstrap-timepicker-m.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/bootstrap/global/plugins/datetimepicker4form/bootstrap-datetimepicker-m.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/bootstrap/global/plugins/bootstrap-table/bootstrap-table.js" type="text/javascript"></script>

	<script src="${cdn}/static/jslib/bootstrap/global/plugins/bootstrap-sweetalert/sweetalert.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/bootstrap/global/plugins/bootstrap-toastr/toastr.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/bootstrap/global/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/bootstrap/global/plugins/jstree/jstree.min.js"></script>

	<script src="${cdn}/static/jsplatform/portal/layout/task/v0/bootstrap-modal-ext.js" type="text/javascript"></script>
	<script src="${cdn}/static/jsplatform/portal/layout/task/v0/common.js" type="text/javascript"></script>

	<script src="${cdn}/static/jslib/bootstrap/global/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.${lang}.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/bootstrap/global/plugins/bootstrap-table/locale/bootstrap-table-${lang}.js" type="text/javascript"></script>

	<script src="${cdn}/static/jslib/3rdpartyother/svg/snap.svg-min.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/3rdpartyother/svg/vivus.js" type="text/javascript"></script>
	<script src="${cdn}/static/jslib/3rdpartyother/plupload-2.3.6/plupload.full.min.changed.js" type="text/javascript"></script>

	<script src="${cdn}/static/jsplatform/admin/designer/flow_style.js" type="text/javascript"></script>
	<script src="${cdn}/static/jsplatform/portal/layout/task/v0/attachment.js?${productionVersion}" type="text/javascript"></script>
	<% } else { %>
	<script src="${cdn}/static/jsmin/platform/task/task.all.js?${productionVersion}" type="text/javascript"></script>
	<% }%>

	<script src="${cdn}/static/jslib/dhtmlx4/ext/dhx_i18n_${lang}.js?${productionVersion}"></script>
	<script src="${cdn}/static/jsplatform/portal/layout/task/v0/todo_i18n_${lang}.js?${productionVersion}"></script>
	<script src="${cdn}/static/jsplatform/portal/layout/task/v0/todo.js?${productionVersion}"></script>

	<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="min-width:345px;padding-top: 7px;">
		<div class="navbar-header">
			<a class="navbar-brand" href="javascript:void(0)" id="pi-title-bar"></a>
		</div>
		<div class="btn-group pull-right btng-common">
			<button type="button" class="btn btn-default pull-right" style="margin-right:10px;margin-left:10px;" onclick="closeWin()">
				<i class="fa fa-times"></i>
				关闭
			</button>
		</div>
		<div class="btn-group pull-right btng-common" style="display: none; margin-right:10px;">
			   <button type="button" class="btn btn-primary" onclick="doSave()">
			      <i class="glyphicon glyphicon-saved"></i>
			      	保存
			   </button>
			   <button type="button" class="btn btn-primary" onclick='showOptionModal()'>
			   		<i class="glyphicon glyphicon-circle-arrow-right"></i>
			      提交下一步
			   </button>   
			   <button type="button" style="display:none" id="btn_return" class="btn btn-primary" data-toggle='modal' data-target='#modal_return'>
			  		<i class="glyphicon glyphicon-backward"></i>
			      驳回
			   </button>
			   <button type="button" style="display:none" id="btn_reassign" class="btn btn-primary">
			  		<i class="glyphicon glyphicon-share-alt"></i>
				   转交
			   </button>   
			   <button type="button" style="display:none" id="btn_involve" class="btn btn-primary">
			  		<i class="glyphicon glyphicon-new-window"></i>
			      加签
			   </button>
				<button type="button" style="display:none" id="btn_defer" class="btn btn-primary">
					<i class="glyphicon glyphicon-new-window"></i>
				</button>
			<!-- <div class="btn-group">
			   <button type="button" class="btn btn-default dropdown-toggle" 
			      data-toggle="dropdown">
			      	<i class="glyphicon glyphicon-chevron-down"></i>&nbsp;更多...
			      	<span class="caret"></span>
			   </button>
			   <ul class="dropdown-menu" role="menu">
			      <li>
			      	<a href="javascript:" id="btn_reassign">
			      		<i class="glyphicon glyphicon-share-alt"></i>&nbsp;&nbsp;转办
			      	</a>
			      </li>
			      <li>
			      	<a href="javascript:" id="btn_involve">
			      		<i class="glyphicon glyphicon-new-window"></i>&nbsp;&nbsp;加签
			      	</a>
			      </li>
			      <li><a href="javascript:"><i class="glyphicon glyphicon-volume-down"></i>&nbsp;&nbsp;通知</a></li>
			   </ul>
			</div> -->
		</div>
		<div class="btn-group pull-right btng-claim" style="margin-right:10px;">
			<button type="button" class="btn red" id="btn_claim" style="display: none">
				<i class="fa fa-check-square-o"></i>
			</button>
			<button type="button" class="btn btn-default" id="btn_unclaim" style="display: none">
				<i class="fa fa-minus-square-o"></i>
			</button>
		</div>
	</nav>

	<div class="tableTabDiv">
		<ul id="navTab" class="nav nav-tabs navClear">
			<li class="active"><a href="#tabbody_1" data-toggle="tab" id="nav_tab_main">主表单</a></li>
			<li><a href="#tabbody_2" data-toggle="tab" id="tabnav_attach" style="display:none">附件&nbsp;<span class="badge badge-info"></span></a></li>
			<li id="tabnav_history"><a href="#tabbody_3" data-toggle="tab">历史</a></li>
			<li><a href="#tabbody_4" data-toggle="tab">流程图</a></li>
		</ul>
	</div>
	<!-- 驳回视图 -->
	<div class='modal fade' id='modal_return' data-backdrop='static'>
		<div class='modal-dialog'>
			<div class='modal-content'>
				<div class='modal-header'>
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title">可驳回环节列表</h4>
				</div>
				<div class='modal-body'>
						<table id="tablerejects" class="table"
                        data-height="340">
                        </table>
                        <br/>
						<div class="input-group input-group-lg">
						  <span class="input-group-addon">备注</span>
						  <input type="text" class="form-control" id="returnOpinion" name="returnOpinion" maxlength="20">
						</div>
				</div>
				<div class='modal-footer'>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary">驳回</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 备注视图 -->
	<div class="modal fade" id='opinionmodal' data-backdrop='static'>
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">请输入办理备注</h4>
	      </div>
	      <div class="modal-body" style="height:100px">
	      <div class="input-group input-group-lg">
			  <span class="input-group-addon">备注</span>
			  <input type="text" class="form-control" id="completeOpinion" name="completeOpinion" maxlength="20">
			</div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-primary" onclick="doSubmit()">提交</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<div id="main" ng-controller="datactx">
		<div id="navTabContent" class="tab-content">
			<div class="tab-pane fade in active" id="tabbody_1">
			
				<div id="fmcontainer_block_pi" class="panel panel-info container " style="display:block;margin-top:0.7em">
				 <div class="panel-heading">
				  <h3 class="panel-title">流程基本信息<span class="spanCaretBottom"></span></h3>
				 </div>
				 <div class="container1 panel-body" style="display: block;">
				  <div class="row">
				   <div class="col-md-2">
				    <p>流程名称</p>
				   </div>
				   <div class="col-md-4">
				    <span class="form-output " style="display:block;" id="pi-bpdName"></span>
				   </div>
				   <div class="col-md-2">
				    <p>申请人</p>
				   </div>
				   <div class="col-md-4">
				    <span class="form-output " style="display:block;"><span class="ng-binding" id="pi-userName"></span></span>
				   </div>
				  </div>
				  <div class="row">
				   <div class="col-md-2">
				    <p>申请时间</p>
				   </div>
				   <div class="col-md-4">
				    <span class="form-output " style="display:block;"><span class="ng-binding" id="pi-createTime"></span></span>
				   </div>
				   <div class="col-md-2">
				    <p>申请部门</p>
				   </div>
				   <div class="col-md-4">
				    <span class="form-output " style="display:block;"><span class="ng-binding" id="pi-deptName"></span></span>
				   </div>
				  </div>
				  <div class="row">
					  <div class="col-md-2">
						  <p>标 题</p>
					  </div>
					  <div class="col-md-4">
						  <span class="form-output " style="display:block;" id="pi-title"></span>
						  <input type="text" style="display:none;" class="form-control  ng-valid ng-dirty" maxlength="20" id="pi-title-input" desc="标题">
					  </div>
					   <div class="col-md-2">
						<p>业务单据号</p>
					   </div>
					   <div class="col-md-4">
						<span class="form-output " style="display:block;"><span class="ng-binding" id="pi-bizNo"></span></span>
					   </div>
				  </div>
				 </div>
				</div>

				<!--FORM_FILE-->
				<div id="biz_form_content">
				</div>
			</div>
			<div class="tab-pane fade" id="tabbody_2">
				<div class="container process-attachments">
					<div class="btn-group" style="margin-top:10px;margin-bottom:10px;display:none;">
						<button id="process-attach-addfiles" class="btn btn-default btn-addfiles" type="button">
							<i class="glyphicon glyphicon-paperclip"></i>上传附件
						</button>
					</div>
					<div class="btn-group pull-right" style="margin-top:10px;margin-bottom:10px;">
						<button class="btn btn-xs btn-default btn-circle btn-icon-only btn-grant popovers" type="button" style="margin-right:20px;display:none">
							<i class="fa fa-info"></i>
						</button>
					</div>

					<div class="row">
						<div class="col-md-4 attachments-progress" style="margin-left:15px;margin-bottom:15px;">
						</div>
					</div>

					<div class="panel panel-default table-responsive table-hover">
						<table class="table table-bordered table-responsive attachments-list">
							<thead>
							<tr class="info">
								<th style="width: 50px;text-align:center"></th>
								<th style="width: 50px;text-align:center">序号</th>
								<th>名称</th>
								<th style="width: 70px;text-align:right">大小</th>
								<th style="width: 160px;text-align:center">上传人</th>
								<th style="width: 160px;text-align:center">上传时间</th>
								<th>上传环节</th>
								<th style="width: 130px;text-align:center">操作</th>
							</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="tabbody_3">
				<div class="panel panel-default table-responsive">
					<table class="table table-bordered table-responsive">
				        <thead>
				          <tr class="info">
				            <th width="5%">序号</th>
				            <th width="15%">环节名称</th>
				            <th width="10%">办理人名称</th>
				            <th width="12%">创建时间</th>
				            <th width="12%">接收时间</th>
				            <th width="12%">完成时间</th>
				            <th width="10%">耗时</th>
				            <th width="29%">备注</th>
				          </tr>
				        </thead>
				        <tbody id="tbody_his">
				        </tbody>
				      </table>
			     </div>
			</div>
			<div class="tab-pane fade" id="tabbody_4">
				<ul id="navTabSvg" class="nav nav-tabs navClear">
				</ul>
				<div id="navTabContentSvg" class="tab-content">
				</div>
			</div>
		</div>
	</div>


<script type="text/javascript">

    var loginName = "${loginName}";
    var displayName = "${displayName}";
    var lang = '${lang}';
    var lang_dp = "zh-CN";
    var pageName = "handletask";

    var resloc = '${cdn}';
    var engloc = "/bpmp-engine";
    var apiloc = '/bpmp-engine/api';
    var ctxpath = '/bpmp-engine';
    var fmdCtx = '${fmdCtx}';

    var imgpath = resloc+'/static/skins/lightblue/images';
    dhtmlx.image_path = resloc+'/static/skins/lightblue/assets/dhtmlx4/imgs/';	//used in grid component
    var imagepath = dhtmlx.image_path;	//used in grid component
    var dhx_skin = 'dhx_skyblue';

    var tl = {};
    tl.rest = apiloc + '/v1/engine';
    tl.tiid = "${has(tiId)?tiId:''}";
    tl.task =  ${ti};
    tl.pi = ${pi};
    tl.mainPi = ${has(mainPi)?mainPi:'null'};
    tl.bpd = ${bpd};
    tl.version = ${version};
    tl.activityConf = ${activityConf};
    tl.bizInput = ${has(bizInput)?bizInput:'null'};
    tl.curTasks = ${has(curTasks)?curTasks:'null'};
    tl.curActivities = ${has(curActivities)?curActivities:'null'};
    tl.delta = "${has(delta)?delta:'null'}";

    var biz_form_content = $("#biz_form_content");
    biz_form_content.load("${formCdnPath}${formfileName}.html", null, function(cotent, result, response){
//        var $cotent = $(cotent);
//        for (var i=0; i<$cotent.length; i++) {
//            if ($cotent[i].nodeName=='SCRIPT') {
//                biz_form_content[0].appendChild($cotent[i]);
//            }
//        }
		//init page
        if ('success'==result) {
            $(document).ready(function () {
                var viewer = new TaskViewer();
                viewer.init();
            });
        } else {
            if (response.status==404) {
                location.href = ctxpath + '/error?msg=FORMFILE_NOTFOUND';
            } else {
                location.href = ctxpath + '/error.jsp';
            }
        }
    });

</script>

</body>
</html>